<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <span id="user_span" style="font-size: 12px;color: red;">123123s</span> -->
    <p>
        <label for="user">用户名:</label>
        <input type="text" id="user" placeholder="用户名">
        <span id="user_span"></span>
    </p>
    <p>
        <input type="button" id="btn" value="注册">
    </p>
</body>
<script>
    // 用户名验证  => 输入验证
    // 由数字 大小写字母 _ 组成,6-12位,且不能以数字开头

    // 按照从易到难的顺序
    // a. 6-12位      user.length
    // b. 且不能以数字开头  =>user.charAt(0)
    // c. 由数字 大小写字母 _ 组成  => 每一个字符都是数字 大小写字母 _ =>存在其他的=>非法字符 
    //     由数字 大小写字母 _ 组成=> 每一个字符都是合法的(不存在非法字符)

    // 注意: 
    // 1. js操作元素之前必须先获取元素
    // 2. 能改变元素的只有元素本身
    // 3. JS操作元素改变样式时 都是通过内联样式实现的

    // 1. 获取元素 
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");
    var btn = document.getElementById("btn");

    // 根据编码范围 生成字符=>放到数组中
    var numList = [];
    for(var i=48;i<=57;i++){
        var char = String.fromCharCode(i);
        numList.push(char);
    }
    console.log(numList);

    var bigList = [];
    for(var i=65;i<=90;i++){
        var char = String.fromCharCode(i);
        bigList.push(char);
    }
    console.log(bigList);

    var smallList = [];
    for(var i=97;i<=122;i++){
        var char = String.fromCharCode(i);
        smallList.push(char);
    }
    console.log(smallList);

    var speList = ["_"]; // 允许使用的特殊字符

    var normalList = numList.concat(bigList,smallList,speList);
    console.log(normalList);



    // 2. 绑定点击事件 => 点击验证
    btn.onclick = function(){

        // 3. 点击取值  => 字符串
        var user = userInp.value;
        var len = user.length;

        // 4.  6-12位
        if(len >=6 && len <=12){
            console.log("长度合法");
           

            // 5. 且不能以数字开头  
            // (1)  取开头 判断是不是数字
            /* var firstChar = user.charAt(0);  // 字符串 "1"
            console.log(firstChar);
            if(numList.indexOf(firstChar)==-1){//集合中不存在 非数字开头
                userSpan.innerText = "非数字开头";
                userSpan.style.color="green";
                userSpan.style.fontSize="12px";
            }else{ //数字开头
                userSpan.innerText = "* 用户名不能以数字开头";
                userSpan.style.color="red";
                userSpan.style.fontSize="12px";
            } */

            // (2) 取第一个字符对应的 字符编码  => 判断是否在48-57之间
            var firstCharCode = user.charCodeAt(0);
            if(!(firstCharCode>=48 && firstCharCode <= 57)){ //是非数字
               

                // 6.  由数字 大小写字母 _ 组成=> 每一个字符都是合法的(不存在非法字符)
                var flag = true; //假设都是合法的
                for(var i=0;i<len;i++){
                    var char = user.charAt(i);
                    if(normalList.indexOf(char)==-1){//在normalList中不存在 => 非法的
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    userSpan.innerText = "√";
                    userSpan.style.color="green";
                    userSpan.style.fontSize="12px";
                }else{
                    userSpan.innerText = "* 用户名由数字、字母、下划线组成";
                    userSpan.style.color="red";
                    userSpan.style.fontSize="12px";
                }



            }else{ //是数字
                userSpan.innerText = "* 用户名不能以数字开头";
                userSpan.style.color="red";
                userSpan.style.fontSize="12px";
            }

        }else{
            userSpan.innerText = "* 用户名需要在6-12位之间";
            userSpan.style.color="red";
            userSpan.style.fontSize="12px";
        }


    }




</script>
</html>